<template>
  <el-upload
    class="upload-xfile"
    ref="upload"
    :action="URL.baseURL+'/file/agreement_order/upload'"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-change="onChange"
    :before-upload="beforeUpload"
    multiple
    :limit="limit"
    :accept="accept"
    :disabled="disabled"
    name="file"
    :headers="{
      'Authorization': getAuthToken()
      }"
    :on-exceed="handleExceed"
    :file-list="fileList">
    <a class="upload" slot="trigger" @click="submitUpload">上传协议</a>
  </el-upload>
</template>

<script>

export default {
  props: ['params', 'orderStatus'],
  data() {
    return {
      fileLists: [],
      fileType: '',
      limit: 1,
      disabled: false,
      accept: '.jpg,.jpeg,.png,.pdf,.JPG,.JPEG,.PDF,.doc,.DOC'
    }
  },
  created() {
    // if(this.orderStatus != 7){
    //   for (var idx in this.params) {
    //     this.fileList.push({
    //       url: this.params[idx].protocolUrl,
    //     })
    //   }
    // }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
      if(this.fileLists.length > 0){
        if(this.fileLists[0].raw.type == 'application/msword' || this.fileLists[0].raw.type == 'application/pdf' && this.fileLists.length == 1){
          this.disabled = true
          this.$message.warning('只能上传一个文件!');
        }else if(this.fileLists[0].raw.type == 'image/jpeg' || this.fileLists[0].raw.type == 'image/png'){
          if(this.fileLists.length == 20){
            this.disabled = true
            this.$message.warning('上传图片只能20张!');
          }
        }
      }

      // 只能上传同一个类型的文件
      if(this.fileType){
        if(this.fileLists[0].raw.type == 'image/png' || this.fileLists[0].raw.type == 'image/jpeg'){
          this.accept = '.jpg,.jpeg,.png,.JPG,.JPEG'
        }else if(this.fileLists[0].raw.type == 'application/msword' || this.fileLists[0].raw.type == 'application/pdf'){
          this.accept = '.pdf,.PDF,.doc,.DOC'
        }
      }

    },
    // 上传之前
    beforeUpload(file) {
      // file.type == 'image/jpeg' 'image/png' 'application/msword'  'application/pdf'
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传的大小不能超过 1MB!');
        return false;
      }

      // 判断图片的话可以20个，文件1个
      if(file.type === 'image/jpeg' || file.type === 'image/png'){
        this.limit = 20
      }else{
        this.limit = 1
      }

      this.fileType = file.type;
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      this.fileLists = fileList
      this.$emit('getUploadXfile', file, fileList)
    },
    handleRemove(file, fileList) {
      this.fileLists = fileList
      this.$emit('getUploadXfile', file, fileList)
    },
    // 上传失败
    handleError(file) {
      this.actionsAfter('上传失败，请稍后再试！', 'error')
    },
  }
}
</script>

<style lang="scss">
.el-upload{
  text-align: left !important;
}
.upload-xfile{
  display: inline-block;
  a.upload{
    background-color: #255B8B;
    margin-left: 20px;
    display: inline-block;
    width: 158px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #FFF;
    border: 1px solid #255B8A;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
  }
}
.upload-xfile .el-upload-list{
  position: absolute;
  left: 580px;
  top: 300px;
  height: 140px;
  overflow-x: hidden;
  .el-upload-list__item{
    line-height: 1.3;
  }
  .el-upload-list__item-name{
    text-align: left;
  }
}

</style>
